
import { Button,message } from 'antd';
import axios from 'axios';
import "./editrole.css"

import React, { useEffect, useState } from 'react'


 let success=function  () {
  message.success("修改成功");
};
export default function Editrole(props) {
  const [changeData, setChangedata] = useState(
    {
        "id": "",
        "name": "",
        "age": "",
        "address": "",
        "tags": "",
     }
  )
  function changeVal(event) {
    setChangedata({
        ...changeData,
        [event.target.name]: event.target.value
    })

  }
  useEffect(() => {
    axios({
      url:"http://localhost:3000/role/"+props.id
    }).then(res => {
      setChangedata(res.data)
    })
  },[props.id])


 function Revise(){
   
    axios({
      url: "http://localhost:3000/role/" + props.id,
      method: "put",
      data:changeData
    }).then(res => {
      console.log(res.data, "酷酷酷酷酷");
      if (res.data) {
        success()
        props.onOk();
        props.edit()

      }
   
    })
  }

  return (
    
    <div className='add-box' style={{ display: props.show }}>
     
     <h1>修改表格</h1>
     <p>
       角色编号：<input type="text" name="id" value={changeData.id || ""} onChange={(event) => changeVal(event)} />
     </p>
     <p>
       角色名称：<input type="text" name="name" value={changeData.name || ""} onChange={(event) => changeVal(event)} />
     </p>
     <p>
       角色代码：<input type="text" name="age" value={changeData.age || ""} onChange={(event) => changeVal(event)} />
     </p>
     <p>
       修改时间：<input type="text" name="address" value={changeData.address || ""} onChange={(event) => changeVal(event)} />
     </p>
     <p>
       修改人  ：<input type="text" name="tags" value={changeData.tags?changeData.tags:""} onChange={(event) => changeVal(event)} />
     </p>
     <p>
       <Button onClick={Revise} >修改</Button>
             <Button onClick={props.edit}>取消</Button>
       
     </p>
     </div>
  )
}



// export default class editshangping extends Component {
//     constructor() {
//         super();
//         this.state = {
//             food: {
//                 id: "",
//                 name: "",
//                 age: "",
//                 address: "",
//                 tags:""
                        
//             }
//         }
        
//     }

//     success = () => {
//         message.success("修改成功");
//     };
//     componentWillReceiveProps(newProps) {
//         console.log("componentWillReceiveProps", newProps.id);
//         if (!newProps.id) {
//             return;
//         }
//         axios({
//             url: "http://localhost:3000/books",
//             params: {
//                 id: newProps.id
//             }
//         }).then(res => {
//             console.log(res.data, "哈哈哈");
//             this.setState({
//                 food:res.data[0]
//             })
//         })
//     }
//     changeVal = (ev) => {
//         this.setState({
//           food: {
//             ...this.state.food,
//             [ev.target.name]: ev.target.value
//           }
//         })
//       }
    
  
//   //修改

//     render() {
//       const {id,name,age,address,namee}=this.state.food
//     return (
//         <div className='add-box' style={{ display: this.props.show }}>
//         <h1>修改表格</h1>
//         <p>
//           角色编号：<input type="text" name="id" value={id} onChange={this.changeVal} />
//         </p>
//         <p>
//           角色名称：<input type="text" name="name" value={name} onChange={this.changeVal} />
//         </p>
//         <p>
//           角色代码：<input type="text" name="age" value={age} onChange={this.changeVal} />
//         </p>
//         <p>
//           修改时间：<input type="text" name="address" value={address} onChange={this.changeVal} />
//         </p>
//         <p>
//           修改人  ：<input type="text" name="namee" value={namee?namee:""} onChange={this.changeVal} />
//         </p>
//         <p>
//           <Button onClick={this.Revise}>修改</Button>
//                 <Button onClick={this.props.EidtHide}>取消</Button>
         
//         </p>
//       </div>
//     )
//   }
// }
